<template>
  <div>
    <PageTitle title="审核认证"></PageTitle>
    <div class="content">
      <div class="form-wrapper">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="证件照(正面)" prop="coverFileList">
            <Upload
              :fileListArr="ruleForm.front"
              :fileListName="'front'"
              :fileMaxCount="1"
              @fileChange="fileChange"
            ></Upload>
          </el-form-item>
          <el-form-item label="证件照(背面)" prop="coverFileList">
            <Upload
              :fileListArr="ruleForm.back"
              :fileListName="'back'"
              :fileMaxCount="1"
              @fileChange="fileChange"
            ></Upload>
          </el-form-item>
          <el-form-item v-if="user_state==3" label="版权照片" prop="coverFileList">
            <Upload
              :fileListArr="ruleForm.copyright"
              :fileListName="'copyright'"
              :fileMaxCount="1"
              @fileChange="fileChange"
            ></Upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">{{results[0].taril?'修改':'提交'}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-wrapper">
        <div class="block" >
          <el-timeline>
            <el-timeline-item
              v-for="(item,index) in results"
              :key="index"
              :timestamp="item.time"
              placement="top"
            >
              <el-card v-if="item.taril">
                <h4>{{item.taril==2?"提交认证审核":"审核结果"}}</h4>
                <p>{{item.taril==2?"你发起认证审核于":"审核通过"}} {{item.time}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import Upload from "@/components/upload/Upload.vue";
export default {
  name: "GoodsDetail",
  components: {
    PageTitle,
    Upload
  },
  data() {
    return {
      ruleForm: {
        name: null,
        mobile: null, //联系方式
        address: null, //地址
        front: [], //图片正面
        back: [], //图片背面
        copyright: [], //版权
        coverFileList: [] //type: 1 为图片  type: 2 为视频
      },
      results: [{ time: "", taril: "" }], //结果
      url: "/v1/personal/personal",
      user_state: localStorage.getItem("user_state")
    };
  },

  activated() {
    this.getDetail();
  },
  deactivated() {},
  watch: {},
  computed: {},
  methods: {
    fileChange(data) {
      console.log("上传-------", data.arr);
      this.ruleForm[data.el] = data.arr;
    },
    // 提交表单
    async submitForm() {
      if (!this.ruleForm.name) {
        this.$message({
          message: "姓名格式不正确",
          type: "warning"
        });
      } else if (!this.ruleForm.mobile) {
        this.$message({
          message: "号码格式不正确",
          type: "warning"
        });
      } else if (!/^1[3456789]\d{9}$/.test(this.ruleForm.mobile)) {
        this.$message({
          message: "号码格式不正确",
          type: "warning"
        });
        return false;
      } else if (!this.ruleForm.front) {
        this.$message({
          message: "正面照格式不正确",
          type: "warning"
        });
      } else if (!this.ruleForm.back) {
        this.$message({
          message: "背面照格式不正确",
          type: "warning"
        });
      } else if (!this.ruleForm.address) {
        this.$message({
          message: "地址格式不正确",
          type: "warning"
        });
      } else if (!this.ruleForm.copyright && this.user_state == 3) {
        this.$message({
          message: "版权信息不正确",
          type: "warning"
        });
      } else {
        let {
          data: { data, code }
        } = await this.$axios({
          url: this.$api + this.url,
          method: "POST",
          data: {
            name: this.ruleForm.name,
            mobile: this.ruleForm.mobile,
            card: this.ruleForm.front[0].id,
            cardr: this.ruleForm.back[0].id,
            address: this.ruleForm.address,
            copyright: this.ruleForm.copyright[0].id
          }
        });
        console.log(data);
        if (code == 0) {
          this.$message({
            message: data,
            type: "success"
          });
          this.ruleForm.front = []; //图片正面
          this.ruleForm.back = []; //图片背面
          this.ruleForm.copyright = []; //版权
          this.getDetail();
        }
      }
    },
    async getDetail() {
      let {data:{code,data}} = await this.$axios({
        url: this.$api + "/v1/personal/show",
        method: "GET",
        params: {}
      });
      console.log("获取详情----------", data,'code----',code);
      
      if (code == 0) {
        if (data.items) {
          this.url = "/v1/personal/modify";
          if (data.data[1].length>0) {
            this.ruleForm.front=[{
              id: data.data[1][0].id,
              url: data.data[1][0].url
            }];
            
          }
          if (data.data[2].length>0) {
            this.ruleForm.back=[{
              id: data.data[2][0].id,
              url: data.data[2][0].url
            }];
            
          }
          if (data.data[0].length>0) {
            this.ruleForm.copyright=[{
              id: data.data[0][0].id,
              url: data.data[0][0].url
            }]; //版权
          }
          this.ruleForm.name = data.items.name;
          this.ruleForm.mobile = data.items.mobile; //联系方式
          this.ruleForm.address = data.items.address; //地址
          if (data.items.updata_at) {
            this.results[0].time = data.items.updata_at;
          } else {
            this.results[0].time = data.items.create_at;
          }
          this.results[0].taril = data.items.taril;
          console.log("this.results-----", this.results);
        } else {
        }
      }
    }
  }
};
</script>

<style lang='scss'>
.form-wrapper {
  width: 50%;
  overflow-y: auto;
}

.tip {
  color: red;
}
.content {
  display: flex;
}
</style>
